<template>
  <div>
    <el-dialog title="" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-row :gutter="10">
          <span>采集设备：</span>
          <el-select
            v-model="iotDeviceId"
            clearable
            filterable
            :rows="2"
            placeholder="采集设备"
            size="small"
            style="margin-right: 10px; width: 150px"
          >
            <el-option
              class="select"
              v-for="(item, index) in xlalalist"
              :key="index"
              :label="item.text"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-row>
        <el-row type="flex" justify="center">
          <div class="upload-excel">
            <input
              ref="excel-upload-input"
              class="excel-upload-input"
              type="file"
              accept=".xlsx, .xls"
              @change="change"
            />
            <div class="drop">
              <i class="el-icon-upload" />
              <el-button type="text" @click="oppnxia"> 下载模板 </el-button>
              <span
                >将文件拖到此处或
                <el-button type="text" @click="add">点击上传</el-button>
              </span>
            </div>
          </div>
        </el-row>
        <el-collapse-transition>
          <div
            class="filename"
            v-if="filename"
            @mouseover="mouseOverFunction"
            @mouseout="mouseOutFunction"
          >
            <span>{{ filename }}</span>
            <span>
              <i v-show="!isshow" class="el-icon-check checks"></i>
              <i v-show="isshow" class="el-icon-close" @click="close"></i>
            </span>
          </div>
        </el-collapse-transition>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao" size="small">取 消</el-button>
        <el-button type="primary" @click="submit" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import axios from "axios";
import { saveAs } from "file-saver";
import { getsbxialaapi, postdaoruapi } from "@/api/ElectricalDistribution/IotTechnology/device";
export default {
  name: "MaintenanceExportorInport",
  props: {
    value: {
      type: String,
    },
  },
  data() {
    return {
      iotDeviceId: "",
      dialogVisible: false,
      xlalalist: [],
      fileList: [],
      data: null,
      filename: "",
      isshow: false,
    };
  },

  mounted() {},

  methods: {
    async oppnxia() {
      // 下载模板
      let a = document.createElement("a");
      a.href = "measurement.xls";
      a.download = "测点模版";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
    add() {
      this.$refs["excel-upload-input"].click();
    },
    async change(e) {
      const fales = e.target.files;
      this.filename = e.target.files[0].name;
      this.data = new FormData();
      this.data.append("file", fales[0]);
      this.$message.success("上传成功");
    },
    // 确认导入
    async submit() {
      if (!this.iotDeviceId) return this.$message.warning("请先选择采集设备");
      if (!this.data) return this.$message.warning("请先上传文件");
      request
        .post(
          `/pio-microservice-biz/pio/equip/measure/point/set/import?deviceId=${this.value}&iotDeviceId=${this.iotDeviceId}`,
          this.data,
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        )
        .then((res) => {
          this.$message({
            type: res.code == 200 ? "success" : "warning",
            message: res.message,
          });
          this.$emit("shuxing");
        });
      this.quxiao();
    },
    quxiao() {
      this.dialogVisible = false;
      this.iotDeviceId = "";
      this.chongzhi();
    },
    mouseOverFunction() {
      this.isshow = true;
    },
    mouseOutFunction() {
      this.isshow = false;
    },
    close() {
      this.chongzhi();
      this.$message.success("清除成功 请重新上传！");
    },
    // 重置文件
    chongzhi() {
      this.data = null;
      this.filename = "";
      this.$refs["excel-upload-input"].value = "";
    },
  },
  watch: {
    async dialogVisible(val) {
      if (val && this.value) {
        const res = await getsbxialaapi({ deviceId: this.value });
        this.xlalalist = res.data.list;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-excel {
  display: flex;
  justify-content: center;
  margin: 20px;
  width: 360px;
  height: 180px;
  align-items: center;
  color: #697086;
  .excel-upload-input {
    display: none;
    z-index: -9999;
  }
  .btn-upload,
  .drop {
    border: 1px dashed #dcdfe6;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 160px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .drop {
    line-height: 40px;
    color: #bbb;
    i {
      font-size: 60px;
      display: block;
      color: #c0c4cc;
    }
  }
}
::v-deep .el-dialog__body {
  width: 360px;
  padding: 30px 50px !important;
}
.filename {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  .checks {
    border-radius: 50%;
    border: 1px solid #67c23a;
    color: #67c23a;
  }
}
.filename:hover {
  background-color: #f1f1f1;
}
</style>
